<%--
  Created by IntelliJ IDEA.
  User: 13095
  Date: 2024/10/7
  Time: 1:16
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<%--<script src="${path}/static/js/jquery-3.2.1.min.js"></script>--%>
<html>
<head>
    <title>添加地址</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <jsp:include page="inc/inc.jsp"></jsp:include>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
    <script src="${path}/static/js/jquery-3.2.1.min.js"></script>
    <!-- Template CSS -->
    <link rel="stylesheet" href="${path}/static/user/css/style-starter.css">
</head>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=5k8Rpa7Bi5HSNNuhjT0EqI6GvMfdQaxe"> </script>
<body>
<header id="site-header" class="fixed-top">
    <section class="w3l-header-4">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <h1><a class="navbar-brand" href="${path}/user/index">
                    <span>跑腿平台</span>
                </a></h1>
                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
                        data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="fa icon-expand fa-bars"></span>
                    <span class="fa icon-close fa-times"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav mx-lg-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/index">首页 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/createTask">发起任务</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/historyOrders">我的订单</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/wallet">钱包</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="${path}/user/myAddress">地址管理</a>
                        </li>
                        <li class="nav-item" >
                            <a class="nav-link" href="${path}/user/reviewList">我的评价</a>
                        </li>
                        <li class="nav-item" onclick="logOut()"><a class="nav-link">退出登录</a> </li>
                    </ul>
                    <ul class="navbar-nav search-right mt-lg-0 mt-2">

                         <li class="nav-item"><a href="${path}/user/updateUserInfo"
                                                class="btn btn-primary btn-style d-none d-lg-block btn-style mr-2"><span
                                class="fa fa-phone mr-3" aria-hidden="true"></span>  ${sessionScope.user.phone_number}</a>
                        </li>
                    </ul>

                    <!-- search popup -->
                    <div id="search" class="pop-overlay">
                        <div class="popup">
                            <form action="#" method="GET" class="d-sm-flex">
                                <input type="search" placeholder="Search.." name="search" required="required"
                                       autofocus>
                                <button type="submit">Search</button>
                                <a class="close" href="#url">&times;</a>
                            </form>
                        </div>
                    </div>
                    <!-- /search popup -->
                </div>
                <!-- toggle switch for light and dark theme -->
                <div class="mobile-position">
                    <nav class="navigation">
                        <div class="theme-switch-wrapper">
                            <label class="theme-switch" for="checkbox">
                                <input type="checkbox" id="checkbox">
                                <div class="mode-container">
                                    <i class="gg-sun"></i>
                                    <i class="gg-moon"></i>
                                </div>
                            </label>
                        </div>
                    </nav>
                </div>
            </nav>
        </div>
    </section>
</header>
<section class="w3l-about-breadcrumb text-left">
    <div class="breadcrumb-bg breadcrumb-bg-about py-3">
        <div class="container grid-breadcrumb">
            <ul class="breadcrumbs-custom-path mt-md-2">
                <li><a href="${path}/user/index">主页</a></li>
                <li><span class="fa fa-angle-double-right mx-2" aria-hidden="true"></span><a href="${path}/user/myAddress">地址管理</a>
                </li>
                <li class="active"><span class="fa fa-angle-double-right mx-2" aria-hidden="true"></span>添加地址
                </li>
            </ul>
        </div>
    </div>
</section>
<div class="form-41-mian mt-5 pt-lg-5 pt-md-4">
    <div class="container" style="height: 1000px;">
        <div class="form-inner-cont">
            <form action="${path}/user/addAddress" method="post">
                <div class="d-grid align-form-map">
                    <div class="form-input">
                        <label>省:</label>
                        <select name="province" id="province">
                            <c:forEach items="${requestScope.provinceList}" var="province">
                                <option value="${province.id}">${province.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="form-input">
                        <label for="city">市:</label>
                        <select name="city.id" id="city">
                            <c:forEach items="${requestScope.beijingList}" var="city">
                                <option value="${city.id}">${city.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="form-input">
                        <label for="place">详细地址:</label>
                        <input type="text" name="address" id="place" class="contact-input" placeholder="请输入详细地址">
                    </div>
                    <div class="form-input">
                        <label for="door">门牌号:</label>
                        <input type="text" name="doorNumber"id="door" placeholder="请输入门牌号">
                    </div>
                    <input type="hidden" name="latitude" id="latitude">
                    <input type="hidden" name="longitude" id="longitude">
                    <div class="submit text-right">
                        <div class="submit text-right">
                            <button type="submit" class="btn btn-primary btn-style">添加</button> </div>
                    </div>
                </div>
            </form>
        </div>
        <div id="Mapcontainer" style="width: 300px; height: 200px;"></div>
    </div>
</div>
<jsp:include page="inc/footer.jsp"></jsp:include>
</body>
<script>
    function creatMap() {
        var map = new BMapGL.Map('Mapcontainer');
        map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 12);
        var myGeo = new BMapGL.Geocoder();
        var city = $("#city").find('option:selected').text();
        var place = $("#place").val();
        if (!city ||!place) {
            alert('请填写完整的城市和详细地址');
            return;
        }
        var address = city + place;
        myGeo.getPoint(address, function (point) {
            if (point) {
                map.centerAndZoom(point, 16);
                map.addOverlay(new BMapGL.Marker(point, {title: address}));
                $("#longitude").val(point.lng);
                $("#latitude").val(point.lat);
            } else {
                alert('您输入的地址无法解析，请检查输入内容');
            }
        }, city);
    }


    $(function () {
        $("#province").change(showCity);
        $("#place").change(creatMap);
    });

    function showCity() {
        var province_id = $("#province").val();
        var city = $("#city");
        $.ajax({
            url: "${path}/user/searchCity",
            data: {provinceID: province_id},
            type: "get",
            success: function (mes) {
                city.html("");
                for (var cities of mes) {
                    var opt = $("<option>");
                    opt.val(cities.id);
                    opt.html(cities.name);
                    city.append(opt);
                }
            },
            error: function () {
                alert('获取城市列表失败，请稍后重试');
            }
        });
    }
</script>
</html>
